<template>
	<view class="containerbox bgc-white" style="background: linear-gradient(200deg, #c4f2e7, #f5f8e5, #f1f1f1, #f1f1f1);">
		<M-Nav
			isShowRight
			bgColor="transparent"
			>
			<!-- reqdata.sourceType == 10 || reqdata.sourceType == 11 ? backFun() : submitStatus = true -->
			<template #right>
				<view class="flex items-center">
					<view class="flex flex-column justify-center items-center mr-20">
						<image :src="`${imgPath}png/pic14.png`" style="height: 25rpx;width: 58rpx"></image>
						<c_timedown size="18" :flash="false"></c_timedown>
					</view>
					<image @click="cardStatus = true" :src="`${imgPath}png/pic15.png`" class="w-50 h-50 mr-20"></image>
				</view>
			</template>
		</M-Nav>
		<view class="containerbox" v-if="!loading">
			<progress :percent="(swiperindex + 1) / flowlist.length * 100" backgroundColor="rgba(255,255,255,0.3)" activeColor="rgba(0,195,134,0.5)" border-radius="4" stroke-width="2" :active="true" active-mode="forwards"/>
			<swiper skip-hidden-item-layout :duration="swiperDuration" class="containerbox" @change="swiperChange" :current="swiperindex">
				<swiper-item class="containerbox" v-for="(item,index) in flowlist" :key="index">
					<template v-if="index === swiperindex">
						<c_items
							:logId="reqdata.id"
							:item="item" 
							class="containerbox" 
							:key="index" 
							:indexs="index" 
							:current="swiperindex" 
							@next="nextEvent"
							@end="endEvent"/>
					</template>
				</swiper-item>
			</swiper>
		</view>
	</view>
	<!-- <c_cards istask v-model="cardStatus" :list="flowlist" :index="swiperindex" @card="swiperindex = $event"/> -->
	
	<c_cards
		istask
		v-model="cardStatus" 
		:index="swiperindex" 
		:list="flowlist" 
		@card="swiperindex = $event, cardStatus = false" 
		@submit="submitStatus = true" />
	<dialog_submit
		v-model="submitStatus" 
		istask 
		@success="subtaskEvent" 
		:questIndex="swiperindex" 
		:examdata="{list: readylist, total: flowlist.length}" />
	<view class="flex w-full items-center justify-center h-full" style="top: 0;left: 0;position: fixed" v-if="loading">
		<view class="dot-stretching" />
	</view>
</template>

<script setup>
import { getCurrentInstance, onBeforeUnmount, reactive, ref, watch } from "vue"
import { onLoad, onShareAppMessage } from "@dcloudio/uni-app"
import useInit from './lib/useInit'
import { useCos } from './lib/useCos'
import useAudio from './lib/useAudio'
import { postWordAnswer_api } from '@/common/apis/spoken'

import c_timedown from './components/timedown.vue'
import c_cards from './components/cards.vue'
import c_items from './components/items.vue'
import dialog_submit from './components/dialog_submit.vue'

import { imgPath } from '@/common/config.js'

const { playAudio, isPlayWord } = useAudio()

const openStatus = ref(false)
const cardStatus = ref(false)

const { flowlist, readylist, swiperindex, swiperDuration, reqdata, loading } = useInit()

const submitStatus = ref(false)
function subtaskEvent(){
	uni.showLoading({
		title: '正在获取报告',
		mask: true
	})
	postWordAnswer_api({id: reqdata.id}).then(res => {
		uni.hideLoading()
		uni.redirectTo({
			url: '/pages/course/spoken/report?id=' + res.id
		})
	})
}

function swiperChange(e){
	swiperindex.value = e.detail.current
}



function nextEvent(data){
	if(data === 'prev'){
		swiperindex.value !== 0 && swiperindex.value--
	} else{
		if((swiperindex.value + 1) !== flowlist.value.length){
			swiperindex.value++
		} else{
			submitStatus.value = true
		}
	}
}

function endEvent(data){
	
	if(!flowlist.value[data.indexs].evaluation){
		readylist.push(data)
	}
	flowlist.value[data.indexs] = data
	console.log(flowlist.value[data.indexs])
	// setTimeout(() => {
		
	// 	console.log('已经答过的', readylist)
	// 	console.log(flowlist.value[swiperindex.value])
	// }, 1)
}

// setTimeout(() => {
// 	resultRef.value.open()
// }, 3000)
</script>

<style lang="scss" scoped>

.word{
	text-align: center;
	font-size: 80rpx;
	font-weight: 600;
}
.badge{background-color: #f5f5f5; padding: 8rpx 30rpx;  margin-top: 40rpx; display: flex; align-items: center; justify-content: center; border-radius: 50rpx; font-size: 24rpx;}
</style>
